<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Tree Graph</title>
  </head>

  <body>
    <select id="layout">
      <option value="dendrogram">系统树</option>
      <option value="compactBox">紧凑树</option>
      <option value="mindmap">脑图布局</option></select
    >
    <div id="mountNode"></div>
    <script src="assets/hierarchy.js"></script>
    <script src="../build/g6.js"></script>
    <script>
      let currentLayout = 'dendrogram';
      const layouts = {
        dendrogram: {
          type: 'dendrogram',
          direction: 'LR',
          // H / V / LR / RL / TB / BT
          nodeSep: 50,
          rankSep: 100,
          radial: true,
        },
        compactBox: {
          type: 'compactBox',
          direction: 'LR',
          getId(d) {
            return d.id;
          },
          getHeight() {
            return 16;
          },
          getWidth() {
            return 16;
          },
          getVGap() {
            return 50;
          },
          getHGap() {
            return 100;
          },
        },
        mindmap: {
          type: 'mindmap',
          direction: 'H',
          getHeight() {
            return 16;
          },
          getWidth() {
            return 16;
          },
          getVGap() {
            return 50;
          },
        },
      };
      const graph = new G6.TreeGraph({
        container: 'mountNode',
        width: 500,
        height: 500,
        renderer: 'svg',
        modes: {
          default: ['collapse-expand', 'drag-canvas'],
        },
        fitView: true,
        layout: layouts.dendrogram,
      });
      graph.node(node => {
        return {
          size: 16,
          anchorPoints: [
            [0, 0.5],
            [1, 0.5],
          ],
          style: {
            fill: '#40a9ff',
            stroke: '#096dd9',
          },
          label: node.id,
          labelCfg: {
            position: node.children && node.children.length > 0 ? 'left' : 'right',
          },
        };
      });
      let i = 0;
      graph.edge(() => {
        i++;
        return {
          shape: 'cubic-horizontal',
          color: '#A3B1BF',
          label: i,
        };
      });
      const data = {
        isRoot: true,
        id: 'Root',
        style: {
          fill: 'red',
        },
        children: [
          {
            id: 'SubTreeNode1',
            raw: {},
            children: [
              {
                id: 'SubTreeNode1.1',
              },
              {
                id: 'SubTreeNode1.2',
                children: [
                  {
                    id: 'SubTreeNode1.2.1',
                  },
                  {
                    id: 'SubTreeNode1.2.2',
                  },
                  {
                    id: 'SubTreeNode1.2.3',
                  },
                ],
              },
            ],
          },
          {
            id: 'SubTreeNode2',
            children: [
              {
                id: 'SubTreeNode2.1',
              },
            ],
          },
          {
            id: 'SubTreeNode3',
            children: [
              {
                id: 'SubTreeNode3.1',
              },
              {
                id: 'SubTreeNode3.2',
              },
              {
                id: 'SubTreeNode3.3',
              },
            ],
          },
          {
            id: 'SubTreeNode4',
          },
          {
            id: 'SubTreeNode5',
          },
          {
            id: 'SubTreeNode6',
          },
          {
            id: 'SubTreeNode7',
          },
          {
            id: 'SubTreeNode8',
          },
          {
            id: 'SubTreeNode9',
          },
          {
            id: 'SubTreeNode10',
          },
          {
            id: 'SubTreeNode11',
          },
        ],
      };
      graph.data(data);
      graph.render();
      document.getElementById('layout').addEventListener('change', e => {
        const layout = e.target.value;
        if (currentLayout !== layout) {
          currentLayout = layout;
          graph.changeLayout(layouts[currentLayout]);
        }
      });
    </script>
  </body>
</html>
